
<template>

  <el-steps :active="active" finish-status="success" class="ml-2">
    <el-step title="爬虫网址配置" />
    <el-step title="携带参数配置" />
    <el-step title="循环参数配置" />
    <el-step title="规则参数配置" />
    <el-step title="开始时间配置" />
  </el-steps>

  <el-form
      ref="form"
      :model="dataToSend.historyTask"
      label-width="auto"
      :label-position="'right'"
      :size="'default'"
      v-if="showForm1"
      class="ml-2"
  >
    <el-form-item label="爬虫名称">
      <el-input v-model="dataToSend.historyTask.name" />
    </el-form-item>

    <el-form-item label="爬虫网址(需要占位符的地方请留意)">
      <el-input v-model="dataToSend.historyTask.targetUrl" />
    </el-form-item>

    <el-form-item label="爬取网页类型">
      <el-select
          clearable
          v-model="dataToSend.historyTask.crawlType"
          placeholder="静态网页 或者 动态网页"
      >
        <el-option label="静态网页" value="Static" />
        <el-option label="动态网页" value="Motion" />
      </el-select>
    </el-form-item>
  </el-form>

  <el-form
      ref="form"
      :model="dataToSend.prefixInfos"
      class="ml-2"
      label-width="auto"
      :label-position="'right'"
      :size="'small'"
      v-if="showForm2"
      v-for="(item, index) in dataToSend.prefixInfos" :key="index"
  >
    <hr>
    <p>参数 {{ index+1 }}</p>
    <el-form-item label="设置携带信息类型">
      <el-select
          clearable
          v-model="item.type"
          placeholder="header 或者 cookie"
      >
        <el-option label="header" value="header" />
        <el-option label="cookie" value="cookie" />
      </el-select>
    </el-form-item>
    <el-form-item label="key的值">
      <el-input v-model="item.header" />
    </el-form-item>
    <el-form-item label="value的值">
      <el-input v-model="item.headerValue" />
    </el-form-item>
    <el-button class="mb-4" @click.prevent="removePrefixInfo(item)"
    >Delete</el-button
    >

  </el-form>
  <div>
  <el-button style="margin-top: 12px" v-if="showForm2" @click="addPrefixInfo()">增加携带信息</el-button>
  </div>
  <el-form
      ref="form"
      :model="dataToSend.crawlFor"
      label-width="auto"
      :label-position="'right'"
      :size="'default'"
      v-if="showForm3"
  >
    <el-form-item label="爬取网址" >
      <el-card>
        {{ dataToSend.historyTask.targetUrl }}
      </el-card>
    </el-form-item>
    <el-form-item label="循环类型" >
      <el-select clearable v-model="dataToSend.crawlFor.type" placeholder="四种循环方式">
        <el-option label="数字自增" value="1" />
        <el-option label="自定义循环方式" value="2" />
        <el-option label="混合循环" value="3" />
        <el-option label="动态点击循环（只用配置点击次数即步长）" value="4" />
      </el-select>
    </el-form-item>

    <el-form-item label="数字自增循环开始下标" placeholder="开始下标" >
      <el-input v-model="dataToSend.crawlFor.start" :disabled="dataToSend.crawlFor.type ==='4'" />
    </el-form-item>

    <el-form-item label="数字自增循环结束下标" placeholder="结束下标">
      <el-input v-model="dataToSend.crawlFor.end" :disabled="dataToSend.crawlFor.type ==='4'"/>
    </el-form-item>

    <el-form-item label="数字自增循环步长" placeholder="循环步长">
      <el-input v-model="dataToSend.crawlFor.step" />
    </el-form-item>

    <el-form-item label="自定义循环" placeholder="循环之间用‘@’分割">
      <el-input v-model="dataToSend.crawlFor.typeArr" :disabled="dataToSend.crawlFor.type ==='4'"/>
    </el-form-item>

  </el-form>

  <el-form
      ref="form"
      :model="dataToSend.rules"
      label-width="auto"
      :label-position="'left'"
      :size="'default'"
      v-if="showForm4"
      class="ml-2"
      v-for="(item, index) in dataToSend.rules" :key="index"
  >
    <hr>
    <p>规则 {{ index+1 }}</p>

    <el-form-item label="设置字段标题" placeholder="字段标题">
      <el-input v-model="item.fieldTitle" :disabled="item.gainType ==='button'" clearable />
    </el-form-item>

    <el-form-item label="设置爬取数据的方式（id，tag，class，attr）">
      <el-select
          clearable
          v-model="item.ruleType"
          placeholder="id，tag，class，attr"
          :disabled="item.gainType ==='button'"
      >
        <el-option label="id" value="id" />
        <el-option label="class" value="class" />
        <el-option label="tag" value="tag" />
        <el-option label="attr" value="attr" />
      </el-select>
    </el-form-item>
    <el-form-item label="具体的值（比如 类名 属性名）">
      <el-input v-model="item.field" clearable/>
    </el-form-item>
    <el-form-item label="爬取那个值在第几位">
      <el-input v-model="item.count" :disabled="item.gainType ==='button'" />
    </el-form-item>

    <el-form-item label="获取属性名的名称（选填 获取属性才用填写）">
      <el-input v-model="item.fieldName" :disabled="item.gainType ==='button'" clearable/>
    </el-form-item>
    <el-form-item label="设置爬取数据的类型（比如文本，还是属性）">
      <el-select
          clearable
          v-model="item.gainType"
          placeholder="文本还是属性还是爬取中间块"
      >
        <el-option label="文本" value="text" />
        <el-option label="属性" value="attr" />
        <el-option label="爬取中间块" value="getAll" />
        <el-option label="动态点击按钮" value="button" />
      </el-select>
    </el-form-item>

    <el-button class="mb-4" @click.prevent="removeRules(item)"
    >Delete</el-button
    >
  </el-form>
  <div>
  <el-button style="margin-top: 12px" v-if="showForm4" @click="addRules()">增加规则信息</el-button>
  </div>
  <el-form
      ref="form"
      :model="dataToSend.history"
      label-width="auto"
      :label-position="'right'"
      :size="'default'"
      class="ml-2"
      v-if="showForm5"
  >
    <el-form-item label="开始时间">
      <el-col :span="11">
        <el-date-picker
            v-model="dataToSend.history.startTime"
            type="datetime"
            label="选择开始的时间"
            placeholder="选择开始的时间"
            style="width: 100%"
        />
      </el-col>
    </el-form-item>
  </el-form>
  <el-button style="margin-top: 12px" @click="previous">Previous step</el-button>
  <el-button style="margin-top: 12px" @click="next">Next step</el-button>

</template>

<script setup lang="ts">

import {reactive, ref} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
import {doGet,doPut,doDelete,doPost} from "../../api"


const active = ref(0)
// 创建数据对象
const dataToSend =  reactive({
  crawlFor: {
    end: null,
    start: null,
    step: null,
    taskId: null,
    type: null,
    typeArr: null
  },
  history: {
    executionTime: "",
    startTime: "",
    status: null,
    taskId: null
  },
  historyTask: {
    id: null,
    name: "",
    targetUrl: "",
    crawlType:""
  },
  prefixInfos: [
    {
      header: null,
      headerValue: null,
      id: null,
      type: null
    }
  ],
  rules: [
    {
      count: 1,
      field: "",
      fieldName: "",
      fieldTitle: "",
      gainType: "",
      id: null,
      ruleType: ""
    }
  ]
})

const showForm1 = ref(true);
const showForm2 = ref(false);
const showForm3 = ref(false);
const showForm4 = ref(false);
const showForm5 = ref(false);

const next = () => {
  if (active.value++ > 4) active.value = 5
  if (active.value=== 0){
    showForm1.value=true
    showForm2.value=false
    showForm3.value=false
    showForm4.value=false
    showForm5.value=false
  }else if (active.value===1){
    showForm1.value=false
    showForm2.value=true
    showForm3.value=false
    showForm4.value=false
    showForm5.value=false
  }else if (active.value===2){
    showForm1.value=false
    showForm2.value=false
    showForm3.value=true
    showForm4.value=false
    showForm5.value=false
  }else if (active.value===3){
    showForm1.value=false
    showForm2.value=false
    showForm3.value=false
    showForm4.value=true
    showForm5.value=false
  }else if (active.value===4){
    showForm1.value=false
    showForm2.value=false
    showForm3.value=false
    showForm4.value=false
    showForm5.value=true
  }else {
    showForm1.value=false
    showForm2.value=false
    showForm3.value=false
    showForm4.value=false
    showForm5.value=true
    save()
  }
}
const previous = ()=>{
  if (active.value-- < 1) active.value = 0
  if (active.value=== 0){
    showForm1.value=true
    showForm2.value=false
    showForm3.value=false
    showForm4.value=false
    showForm5.value=false
  }else if (active.value===1){
    showForm1.value=false
    showForm2.value=true
    showForm3.value=false
    showForm4.value=false
    showForm5.value=false
  }else if (active.value===2){
    showForm1.value=false
    showForm2.value=false
    showForm3.value=true
    showForm4.value=false
    showForm5.value=false
  }else if (active.value===3){
    showForm1.value=false
    showForm2.value=false
    showForm3.value=false
    showForm4.value=true
    showForm5.value=false
  }else if (active.value===4){
    showForm1.value=false
    showForm2.value=false
    showForm3.value=false
    showForm4.value=false
    showForm5.value=true
  }else {
    showForm1.value=false
    showForm2.value=false
    showForm3.value=false
    showForm4.value=false
    showForm5.value=true
    save()
  }
}

const removePrefixInfo = (item) =>{
    const index = dataToSend.prefixInfos.indexOf(item)
    if (index !== -1) {
      dataToSend.prefixInfos.splice(index, 1)
    }
}
const addPrefixInfo = () => {
  dataToSend.prefixInfos.push({
    header: null,
    headerValue: null,
    id: null,
    type:null
  })
}

const removeRules=(item)=>{

    const index = dataToSend.rules.indexOf(item)
    if (index !== -1) {
      dataToSend.rules.splice(index, 1)
    }
}
const addRules = () => {
  dataToSend.rules.push({
    count: 1,
    field: "",
    fieldName: "",
    fieldTitle: "",
    gainType: "",
    id: null,
    ruleType: ""
  })

}
//  /api/crawler/history

const save=()=>{
  if (active.value===5){
    formatStartTime(dataToSend.history.startTime)
    ElMessageBox.confirm('是否保存爬虫配置')
        .then(() => {
          doPost("/api/crawler/history/save",dataToSend,resp=>{
            if (resp.code===1){
              ElMessage({
                message: resp.data,
                type: 'success',
              })
              reSet()
            }else {
              ElMessage({
                message: "保存失败",
                type: 'error',
              })
            }
          })


        })
        .catch(() => {
          // catch error
        })
  }

 const reSet=()=>{
   // 清空crawlFor属性
   dataToSend.crawlFor.end = null;
   dataToSend.crawlFor.start = null;
   dataToSend.crawlFor.step = null;
   dataToSend.crawlFor.taskId = null;
   dataToSend.crawlFor.type = null;
   dataToSend.crawlFor.typeArr = null;

// 清空history属性
   dataToSend.history.executionTime = "";
   dataToSend.history.startTime = "";
   dataToSend.history.status = null;
   dataToSend.history.taskId = null;

// 清空historyTask属性
   dataToSend.historyTask.id = null;
   dataToSend.historyTask.name = "";
   dataToSend.historyTask.targetUrl = "";
   dataToSend.historyTask.crawlType = "";

// 清空prefixInfos数组
   dataToSend.prefixInfos.forEach(info => {
     info.header = null;
     info.headerValue = null;
     info.id = null;
     info.type = null;
   });

// 清空rules数组
   dataToSend.rules.forEach(rule => {
     rule.count = 1;
     rule.field = "";
     rule.fieldName = "";
     rule.fieldTitle = "";
     rule.gainType = "";
     rule.id = null;
     rule.ruleType = "";
   });

 }
}
const formatStartTime = (startTime) => {
  const year = startTime.getFullYear();
  const month = (startTime.getMonth() + 1).toString().padStart(2, '0');
  const day = startTime.getDate().toString().padStart(2, '0');
  const hours = startTime.getHours().toString().padStart(2, '0');
  const minutes = startTime.getMinutes().toString().padStart(2, '0');
  const seconds = startTime.getSeconds().toString().padStart(2, '0')

  // 构建带有时区信息的 ISO 8601 格式的日期时间字符串
  const isoDateTime = `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;

  dataToSend.history.startTime = isoDateTime;
};



</script>

<style scoped>

</style>